<template>
    <div class="ml-10">
        <HeaderTitle class="mt-10 pl-30" :textObj="textObj"></HeaderTitle>
        <!-- 选择日期 -->
        <div class="bg-fff pl-30 pb-20">
            <span class="mr-10">月份选择: </span>
            <el-date-picker @change="selectDate" v-model="params.date" type="month" placeholder="选择月份"
                value-format="YYYY-MM">
                <template #default="cell">
                    <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
                        <span class="el-date-table-cell__text">{{ cell.text + 1 }}月</span>
                    </div>
                </template>
            </el-date-picker>
        </div>

        <!-- 表格内容 -->
        <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column align="center" prop="id" label="编号" />
            <el-table-column align="center" :formatter="row=> formatDate(row , 'cTime')" prop="cTime" label="创建日期" />
            <!-- <el-table-column align="center" :formatter="row=> formatDate(row , 'uTime')" prop="uTime" prop="uTime" label="更新日期" /> -->
            <el-table-column align="center" prop="type" label="类型" />
            <el-table-column align="center" prop="amount" label="金额" />
            <el-table-column align="center" prop="desc" label="用途" />
        </el-table>
        <!-- 分页 -->

        {{total}}
        <div class="flex aic jc-c bg-fff pt-10 pb-10">
            <el-pagination background layout="prev, pager, next" :total="total" :hide-on-single-page="true"
                @current-change="onchang" :current-page="params.currPage" />
        </div> 
    </div> 
</template>

<script setup>
import { ref, onMounted } from 'vue';
import HeaderTitle from '@/components/HeaderTitle.vue';
import { feeUsageList } from '@/api/index';
import { formatDate } from '../../utils/utils'


let textObj = {
    module: '计费',
    name: '使用记录',
    desc: '展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能..',
} 

// 总条数
let total = ref(0);

// 分页数据选项
let params = ref({
    currPage: 1,
    pageSize: 10,
    date: '',
})
// 改变页数
const onchang = (page) => { 
    params.value.currPage = page;
    getList();
}

const selectDate = (val) => {
    // 请求该月第一页的数据
    params.value.currPage = 1;
    getList();
}

const tableData = ref([
    {
        "id": "530000198011127833",
        "type": "usege",
        "desc": "片情得九史级无强。",
        "amount": -200,
        "cTime": 1672116274230
    }
])



const getList = () => { 
    feeUsageList(params.value).then(res => {
        tableData.value = res.data;
        total.value = res.total;  // 48 6
    })
}

onMounted(getList);

</script>